<template>
	<view class="publish">
		<view class="publishCon p20">
			<view class="Roll" v-if="isRoll">
				<view class="RollT dis">
					<view class="RollTI">
						<image src="/pages/static/12.png" mode=""></image>
					</view>
					<view class="RollTTContainer">
						<view class="RollTT">禁止违反学校规定，恶意抨击他人，发布垃圾广告等</view>
					</view>
					<view class="RollTE" @click="noRoll">x</view>
				</view>
				<view class="RollB"></view>
			</view>
			<view class="pubTit">
				<!-- <input v-model="title" type="text" placeholder="请输入标题（允许为空）" /> -->
				<up-input placeholder="请输入内容" border="none" v-model="title"></up-input>
			</view>
			<view class="border"></view>
			<view class="pubCon">
				<up-textarea v-model="pubCon" maxlength="1000" height="140" border="none" count placeholder="写下这一刻的想法吧~"></up-textarea>
			</view>
			<view class="border"></view>
			<view class="pubImgList dis">
				<view class="imgItem" v-for="item in imgList" :key="item">
					<image :src="item" mode="aspectFill"></image>
					<view class="offImg" @click.stop="delImg(item)">x</view>
				</view>
				<view class="imgItem imgItemUp dis" v-if="imgList.length <= 9" @click="uploadImageFun">
					<view class="upIcon">
						<image src="/pages/static/11.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="publishCon2 p20 mt30">
			<!-- 匿名发布 -->
			<view class="pubSet dis">
				<view class="setL dis">
					<view class="setIcon">
						<image src="/pages/static/13.png" mode=""></image>
					</view>
					<view class="setTit">匿名发布</view>
				</view>
				<view class="setR">
					<up-switch v-model="cryptonym" inactiveColor="#999"></up-switch>
				</view>
			</view>
			<view class="border"></view>
			<!-- 换马甲 -->
			<view class="pubSet dis mt30">
				<view class="setL dis">
					<view class="setIcon">
						<image src="/pages/static/15.png" mode=""></image>
					</view>
					<view class="setTit">切换马甲</view>
				</view>
				<view class="setR">
					<up-switch @change="seVestCh" v-model="seVest" inactiveColor="#999"></up-switch>
				</view>
			</view>
			<!-- 马甲 -->
			<view class="border" v-if="VestVal.id != 0"></view>
			<view class="addition" v-if="VestVal.id != 0">
				<view class="additionItem dis">
					<view class="itemL">马甲发帖</view>
					<view class="itemR dis">
						<view class="itemRI">
							<image :src="VestVal.vestAvatar" mode=""></image>
						</view>
						<view class="itemRT">{{ VestVal.vestNickname }}</view>
					</view>
				</view>
			</view>
			<view class="border"></view>
			<!-- 主题分类 -->
			<view class="pubSet dis mt30">
				<view class="setL dis">
					<view class="setIcon">
						<image src="/pages/static/14.png" mode=""></image>
					</view>
					<view class="setTit">主题分类</view>
				</view>
				<view class="setR dis" @click="openTheme">
					<view class="setRT">{{ themeVal.value ? themeVal.value : '请选择主题分类' }}</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="border"></view>
			<!-- 置顶发布 -->
			<view class="pubSet dis mt30">
				<view class="setL dis">
					<view class="setIcon">
						<image src="/pages/static/16.png" mode=""></image>
					</view>
					<view class="setTit">置顶发布</view>
				</view>
				<view class="setR">
					<up-switch v-model="watSw" @change="swChange" inactiveColor="#999"></up-switch>
				</view>
			</view>
			<view class="border"></view>
			<!-- 置顶时间 -->
			<view class="addition" v-if="addTiem.name">
				<view class="additionItem dis">
					<view class="itemL">置顶时间</view>
					<view class="itemR">{{ addTiem.name }}</view>
				</view>
			</view>
			<view class="border" v-if="addTiem.name"></view>
			<!-- 联系方式 -->
			<up-collapse>
				<up-collapse-item>
					<template #title>
						<view class="collapseCon dis">
							<view class="collapseImg">
								<image src="/pages/static/17.png" mode=""></image>
							</view>
							<view class="collapseText">联系方式</view>
							<view class="collapseText1">完善联系方式，方便其他同学联系</view>
						</view>
					</template>
					<view class="collapseConC">
						<view class="ConCItem dis">
							<view class="cItemTit">联系姓名</view>
							<view class="cItemVal">
								<input type="text" v-model="wayName" placeholder="请输入姓名" />
							</view>
						</view>
						<view class="ConCItem dis pt15">
							<view class="cItemTit activea">联系方式</view>
							<view class="cItemVal dis">
								<view class="valItem" :class="way == 1 ? 'active' : ''" @click="changeWay(1)">手机号码</view>
								<view class="valItem" :class="way == 2 ? 'active' : ''" @click="changeWay(2)">微信账号</view>
								<view class="valItem" :class="way == 3 ? 'active' : ''" @click="changeWay(3)">QQ账号</view>
							</view>
						</view>
						<view class="ConCItem dis pt15">
							<view class="cItemTit">{{ wayType }}</view>
							<view class="cItemVal">
								<input v-model="wayNum" type="number" :placeholder="'请输入' + wayType" />
							</view>
						</view>
					</view>
				</up-collapse-item>
			</up-collapse>
		</view>
		<view class="but" @click="publishPost">发布帖子</view>
	</view>
	<!-- 置顶时间 -->
	<up-action-sheet
		:actions="sheetOptions"
		title="请选择置顶时间"
		:show="sheetShow"
		:round="15"
		@select="selectSheet"
		:closeOnClickOverlay="true"
		@close="closeSheet"
		cancelText="取消"
	></up-action-sheet>
	<!-- 切换马甲 -->
	<up-popup :show="vestShow" mode="right" @close="closeVe" @open="openVe">
		<view class="VestDom">
			<view class="VestTit dis">
				<view class="VestTitL">请选择马甲</view>
				<view class="VestTitR" @click="closeVe()">
					<up-icon name="close"></up-icon>
				</view>
			</view>
			<view class="VestCon">
				<view class="VestConItem dis" v-for="item in VestList" :key="item.id" @click="VestOk(item)">
					<view class="itemI">
						<image :src="item.vestAvatar" mode=""></image>
					</view>
					<view class="itemN ellipsis">{{ item.vestNickname }}</view>
				</view>
			</view>
		</view>
	</up-popup>

	<up-popup :round="10" :show="themeShow" @close="closeTheme" @open="openTheme">
		<view class="ThemeDom">
			<view class="ThemeTit dis">
				<view class="TitL"></view>
				<view class="TitC">请选择主题分类</view>
				<view class="TitR" @click="closeTheme">
					<up-icon name="close"></up-icon>
				</view>
			</view>
			<view class="ThemeList dis">
				<view class="ThemeItem dis" @click="clickTheme(item)" v-for="item in plateData" :key="item.id">
					<view class="itemL">
						<image src="/pages/static/8.png" mode=""></image>
					</view>
					<view class="itemR">{{ item.plateName }}</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
import { plateList, userVest, topRule, threadAdd, getUserInfo, statisticsWebsitePVandUV } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { uploadImage } from '@/util/util.js';
const isRoll = ref(true);
const noRoll = () => {
	isRoll.value = false;
};
const userInfo = ref({});
const getUserInfoFun = async () => {
	const res = await getUserInfo();
	// console.log(res)
	if (res.code == 0) {
		userInfo.value = res.data.user;
		wayName.value = res.data.user.nickname;
	}
};
onShow(() => {
	console.log('onShow');
});
onLoad((options) => {
	statisticsWebsitePVandUV();
	console.log(options);
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
	}
	getUserInfoFun();
	plateListFun();
});
const schoolInfo = ref({});
// 上传图片
const imgList = ref([]);
const uploadImageFun = async () => {
	const res = await uploadImage();
	if (res.code == 0) {
		imgList.value.push(res.data.imgUrl);
		imgList.value.length;
	}
};
const delImg = (item) => {
	imgList.value = imgList.value.filter((img) => img != item);
};
// 发帖
const publishPost = async () => {
	if (!pubCon.value) {
		uni.showToast({
			title: '请输入内容',
			icon: 'none',
			duration: 2000
		});
		return;
	}
	if (!themeVal.value.id) {
		openTheme();
		return;
	}
	const data = {
		departmentId: schoolInfo.value.schoolId,
		plateId: themeVal.value.id, //主题分类
		title: title.value,
		content: pubCon.value,
		isAnonymous: cryptonym.value ? 1 : 0,
		isTop: sheetShow.value ? 1 : 0, //是否置顶
		topRuleId: addTiem.value.id, //置顶规则
		isRedEnvelope: 0,
		contactName: wayName.value,
		contactPhone: way.value == 1 ? wayNum.value : '',
		contactWechat: way.value == 2 ? wayNum.value : '',
		contactQq: way.value == 3 ? wayNum.value : '',
		imageUrls: imgList.value,
		vestAvatar: VestVal.value.vestAvatar,
		vestNickname: VestVal.value.vestNickname
	};
	const res = await threadAdd(data);
	if (res.code == 0) {
		uni.showToast({
			title: '发布成功',
			icon: 'success',
			duration: 2000
		});
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}, 2000);
	}
};

const pubCon = ref('');
const title = ref('');

// 匿名发布
const cryptonym = ref(false);

// 主题分类
const themeVal = ref({});
const themeShow = ref(true);
const plateData = ref([]);
// 获取主题分类
const plateListFun = async () => {
	const res = await plateList();
	// console.log(res);
	if (res.code == 0) {
		plateData.value = res.data.list;
	}
};
const openTheme = () => {
	themeShow.value = true;
};
const closeTheme = () => {
	themeShow.value = false;
};
const clickTheme = (item) => {
	themeVal.value = {
		id: item.id,
		value: item.plateName
	};
	closeTheme();
};

// 切换马甲
const VestList = ref([]);
const VestVal = ref({
	id: 0,
	vestNickname: '',
	vestAvatar: ''
});
const seVest = ref(false);
const seVestCh = (e) => {
	if (e == true) {
		userVestFun();
	} else {
		VestVal.value = {
			id: 0,
			vestNickname: '',
			vestAvatar: ''
		};
	}
};
const vestShow = ref(false);
const closeVe = () => {
	vestShow.value = false;
	if (!VestVal.value.id) {
		seVest.value = false;
	}
};
const openVe = () => {
	vestShow.value = true;
};
const VestOk = (item) => {
	VestVal.value = {
		id: item.id,
		vestNickname: item.vestNickname,
		vestAvatar: item.vestAvatar
	};
	closeVe();
};
const userVestFun = async () => {
	const res = await userVest();
	if (res.code == 0) {
		VestList.value = res.data.list;
		vestShow.value = true;
	}
};

// 置顶时间
const sheetOptions = ref([]);
const sheetShow = ref(false);
const watSw = ref(false);
const addTiem = ref({
	name: '',
	id: 0
});
const topRuleFun = async () => {
	const res = await topRule();
	// console.log(res);
	if (res.code == 0) {
		const newList = res.data.list.map((item) => {
			const name = `置顶${item.topDuration}小时，${item.money}元`;
			return {
				...item,
				name
			};
		});
		sheetOptions.value = newList;
		sheetShow.value = true;
	}
};
// 弹窗确认
const selectSheet = (index) => {
	addTiem.value = {
		name: index.name,
		id: index.id
	};
	closeSheet();
};
// 弹窗关闭
const closeSheet = () => {
	if (!addTiem.value.id) {
		watSw.value = false;
	}
	sheetShow.value = false;
};
// 开关change事件
const swChange = (e) => {
	if (e == true) {
		topRuleFun();
	} else {
		addTiem.value = {
			name: '',
			id: 0
		};
	}
};

// 联系方式
const wayName = ref('');
const wayNum = ref('');
const way = ref(1);
const wayType = ref('手机号码');
const changeWay = (val) => {
	if (val == 1) {
		wayType.value = '手机号码';
	}
	if (val == 2) {
		wayType.value = '微信账号';
	}
	if (val == 3) {
		wayType.value = 'QQ账号';
	}
	way.value = val;
};
</script>

<style scoped lang="scss">
.publish {
	padding: 30rpx;
	padding-top: 90rpx;
	.publishCon {
		position: relative;
		padding: 30rpx;
		width: 690rpx;
		background: #ffffff;
		border-radius: 24rpx;
		z-index: 1;
		.Roll {
			position: absolute;
			top: -66rpx;
			left: 0rpx;
			width: 690rpx;
			height: 160rpx;
			background: #e5e6f9;
			border-radius: 24rpx;
			overflow: hidden;
			z-index: 0;
			.RollT {
				justify-content: space-between;
				align-items: center;
				padding: 18rpx 16rpx 12rpx 16rpx;
				// background: linear-gradient(44deg, rgba(83, 132, 247, 0.1) 0%, rgba(87, 68, 232, 0.1) 100%);
				.RollTI {
					width: 36rpx;
					height: 36rpx;
					overflow: hidden;
				}
				.RollTTContainer {
					width: 552rpx;
					height: 34rpx;
					overflow: hidden;
					position: relative;
					.RollTT {
						position: absolute;
						white-space: nowrap;
						font-size: 24rpx;
						color: #6b96fd;
						animation: scrollText 10s linear infinite;
					}
				}
				.RollTE {
					width: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #5084fe;
					border-radius: 50%;
					text-align: center;
					color: #fff;
					font-size: 20rpx;
				}
			}
			.RollB {
				width: 100%;
				height: 110rpx;
				border-radius: 24rpx;
				background-color: #fff;
			}
		}
		.pubTit {
			font-size: 28rpx;
		}
		.pubCon {
			padding-top: 30rpx;
			width: 100%;
			height: 350rpx;
		}
		.pubImgList {
			flex-wrap: wrap;
			column-gap: 12rpx;
			row-gap: 12rpx;
			padding-top: 30rpx;
			width: 100%;
			.imgItemUp {
				justify-content: center;
				align-items: center;
			}
			.imgItem {
				position: relative;
				width: 202rpx;
				height: 202rpx;
				background: #f4f5fe;
				border-radius: 16rpx;
				overflow: hidden;
				.upIcon {
					width: 108rpx;
					height: 108rpx;
				}
				.offImg {
					position: absolute;
					right: 0;
					top: 0;
					width: 40rpx;
					height: 40rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 40rpx;
					background: #000;
					color: #fff;
				}
			}
		}
	}
	.publishCon2 {
		padding: 30rpx;
		padding-bottom: 20rpx;
		width: 690rpx;
		background: #ffffff;
		border-radius: 24rpx;
		.addition {
			padding: 0 56rpx;
			padding-top: 30rpx;
			width: 100%;
			.additionItem {
				justify-content: space-between;
				align-items: center;
				width: 100%;
				font-size: 24rpx;
				color: #999999;
				.itemR {
					align-items: center;
					.itemRI {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						background: #5084fe;
					}
					.itemRT {
						margin-left: 10rpx;
					}
				}
			}
		}
		.pubSet {
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.setL {
				.setIcon {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
				}
				.setTit {
					font-size: 28rpx;
					color: #000000;
				}
			}
			.setRT {
				margin-top: -5rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
		.collapseCon {
			position: relative;
			width: 100%;
			.collapseImg {
				position: absolute;
				top: -20rpx;
				left: -35rpx;
				width: 40rpx;
				height: 40rpx;
			}
			.collapseText {
				position: absolute;
				top: -20rpx;
				left: 20rpx;
			}
			.collapseText1 {
				position: absolute;
				top: -17rpx;
				right: 0;
				font-size: 24rpx;
				color: #999999;
			}
		}
		.collapseConC {
			.ConCItem {
				padding-bottom: 15rpx;
				border-bottom: 2rpx solid #f4f4f4;
				.cItemTit {
					margin-right: 30rpx;
					font-size: 24rpx;
					color: #999999;
				}
				.activea {
					line-height: 50rpx;
				}
				.cItemVal {
					.valItem {
						margin-right: 16rpx;
						width: 122rpx;
						height: 50rpx;
						line-height: 50rpx;
						background: linear-gradient(44deg, #eef2fe 0%, #eeecfc 100%);
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #5084fe;
						text-align: center;
					}
					.active {
						background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
						color: #fff;
					}
					input {
						margin-top: -5rpx;
						font-size: 24rpx;
					}
				}
			}
			.ConCItem:last-child {
				padding-bottom: 0;
				border-bottom: none;
			}
		}
	}
	.border {
		margin-top: 30rpx;
		width: 630rpx;
		height: 0rpx;
		border-top: 2rpx solid #f5f6f8;
	}
	.but {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 690rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
		border-radius: 16rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
	}
}
.VestDom {
	width: 100%;
	height: 100%;
	background-color: #f7f7f7;
	.VestTit {
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
	}
	.VestCon {
		padding-top: 30rpx;
		.VestConItem {
			align-items: center;
			padding: 30rpx;
			margin-bottom: 20rpx;
			width: 400rpx;
			background-color: #fff;
			.itemI {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #999;
			}
			.itemN {
				flex: 1;
				padding-left: 30rpx;
				color: #666;
			}
		}
	}
}
.ThemeDom {
	.ThemeTit {
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		.TitC {
			font-size: 28rpx;
			color: #000000;
			line-height: 36rpx;
		}
		.TitR {
			padding-right: 30rpx;
		}
	}
	.ThemeList {
		flex-wrap: wrap;
		padding: 40rpx;
		padding-top: 0;
		.ThemeItem {
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			width: 320rpx;
			height: 100rpx;
			background: #f4f5fe;
			border-radius: 16rpx;
			.itemL {
				margin-top: 5rpx;
				width: 48rpx;
				height: 48rpx;
			}
			.itemR {
				margin-left: 24rpx;
				font-size: 32rpx;
				color: #000000;
			}
		}
		.ThemeItem:nth-of-type(even) {
			margin-right: 0;
		}
	}
}
@keyframes scrollText {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
</style>
<style>
page {
	background: #f7f7f7;
}
.u-line {
	border-color: #f5f6f8 !important;
}
.u-line.data-v-72791e59 {
	/* display: none !important; */
	border-color: #f5f6f8 !important;
}
image {
	width: 100%;
	height: 100%;
}
.mt30 {
	margin-top: 30rpx;
}
.pt15 {
	padding-top: 15rpx;
}
/* #ifdef MP-WEIXIN */
.fixed-input {
	letter-spacing: 0 !important;
}
input {
	letter-spacing: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
	font-variant-numeric: normal !important;
}
/* #endif */
</style>
